<template>
  <div>
    <div class="search_box">
      <div class="Input_search_box">
        <Input placeholder="此处有搜索框" v-model="seachvalue" />
      </div>
      <div class="Icon_buitton_box" @click="likeSecrch()">
        <Icon
          type="ios-search"
          size="25"
          color="white"
          class="Icon_search_box"
        />
      </div>
    </div>
    <div class="text_row_1">
      <Table  :columns="columns1" :data="dataGoods">
        <template slot-scope="{ row, index }" slot="state">
          <span> {{ states[parseInt(row.g_state)].title }}</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="showparticulars(row)"
            >详情</Button
          >
          <Button
            type="error"
            size="small"
            style="margin-right: 5px"
            @click="exitGoods(row)"
            >停止</Button
          >
          <Button
            size="small"
            @click="changeMsg(index, row)"
            style="margin-right: 5px"
            >修改</Button
          >
        </template>
      </Table>
    </div>
    <div class="page_box_goodsMange">
      <template>
        <Page
          :total="dataCount"
          :page-size="pageSize"
          show-total
          class="paging"
          @on-change="changepage"
        />
      </template>
    </div>
    <!-- 第一个模态框 详情模态框 -->
    <Modal v-model="modal1" title="项目详情">
      <div class="Goods_message_box">
        <div class=" img_box_Goods">
          <img :src="ImgUrl" alt="" class="Goods_img" />
          <br />
          <Button
            type="primary"
            style="margin-left:20px;margint-top:10px"
            @click="showVideo"
          >
            <Icon type="ios-videocam" />
            视频观看</Button
          >
          </div>
          <div class="right_goods_box">
          <div>
            <span>项目名：</span>
            <span>{{ name_Goods }}</span>
          </div>
          <div>
            <span>文字简介：</span>
            <span>{{ text_Goods }}</span>
          </div>
        </div>
      </div>
    </Modal>
    <!-- 第二个模态框 修改认模态框 -->
  <Modal v-model="modal2" title="项目修改"  >
    <div class="modal2_all_box">
    <div class="left_box_modal2">
      <img class="modal2-img" :src="ImgUrl" alt="">
    </div>
    <div class="right_box_modal2">
      <div>
        <span class="font_modal2">项目名</span>
         <Input  class="Input-modal2"  v-model="name_Goods" placeholder="请输入项目名" />
         <span class="fonts_modal2"> 期望金额</span>
         <Input  class="Input2-modal2" v-model="wantmoney" placeholder="请输入1-10位的数字" @on-keyup="numLook" />
         <span> 简介</span>
         <Input  class="Input3-modal2" v-model="text_Goods" placeholder="请输入简介" />
      </div>
      </div>
    </div>
    <div slot="footer">
      <Button @click="Notsend_modal2">暂不修改</Button>
      <Button type="primary" @click="sendCMsg">确认修改</Button>
    </div>

  </Modal>
    </Modal>
    <!-- 第三个模态框 视频播放模态框 -->
    <Modal v-model="modal3">
      <div class="video_goods_box">
        <video ref = "videos" :src="videoUrl" width="100%" controls="controls"></video>
      </div>
      <div slot="footer">
        <Button type="primary" @click="letVideoStop">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getmessage } from "server/GoodsManage.js";
import { sendMessage } from "server/GoodsManage.js";
import { senDelMes } from "server/GoodsManage.js";
import { sendSta } from "server/GoodsManage.js";
import { sendChangeMsg } from 'server/GoodsManage.js';
// 状态
const states = [
  {
    id: 0,
    title: "正在众筹",
  },
  {
    id: 1,
    title: "待审核",
  },
  {
    id: 2,
    title: "众筹成功",
  },
  {
    id: 3,
    title: "审核过期",
  },
  {
    id: 4,
    title: "众筹失败 ",
  },
  {
    id: 5,
    title: "停止众筹",
  },
  {
    id:5,
    title:'审核未通过'
  }
];
// 表头
const columns1 = [
  {
    title: "id",
    key: "gid",
    // width: 60,
  },
  {
    title: "项目名",
    key: "g_name",
    width: 250,
  },
  {
    title: "目前金额",
    key: "g_start_money",
    // width: 100,
  },
  {
    title: "期望金额",
    key: "g_end_money",
    // width: 100,
  },
  {
    title: "时间",
    key: "g_create_time",
    // width: 180,
  },
  {
    title: "发起人",
    key: "nickname",
  },
  {
    title: "状态",
    slot: "state",
    key: "g_state",
  },
  {
    title: "操作",
    slot: "action",
    width: 200,
    align: "center",
  },
];

export default {
  data() {
    return {
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 4,
      // 修改Id
      changeId:'',
      // 状态
      states,
      // 删除gid
      DelNum: "",
      // 模态框1状态
      modal1: false,
      // 模态框2状态
      modal2: false,
      // 模态框3状态
      modal3: false,
      // 此处为商品管理表
      columns1,
      // 此处为修改后的data
      dataGoods: [],
      // 此处为所有的data
      allData: [],
      // 搜索框的值
      seachvalue: "",
      // 以下为绑定详情得属性
      // 默认图片路径 绑定g_picture
      ImgUrl:
        "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1508707907,3805118631&fm=55&app=54&f=JPEG?w=1140&h=640",
      // 详情项目名
      name_Goods: "",
      // 详情介绍绑定 g_text
      text_Goods:
        "",
      // 目前金额
      nowmoney: "",
      // 期望金额
      wantmoney: "",
      // 视频路径
      videoUrl: "",
    };
  },
  methods: {
    // 取消事件
    Notsend_modal2(){
      this.modal2= false
    },
    // 发送修改信息时
    sendCMsg(){
      let _this = this
      let nowmoney = this.wantmoney
      if(this.name_Goods == ''| this.text_Goods == ''| this.wantmoney == ''){
       
        this.$Message["error"]({
          background: true,
          content: "请输入完整的信息？！",
        });
      }else{
        let  reg=/^[0-9]{0,10}$/
        let mowwantmoney = this.wantmoney.toString();
        if ( mowwantmoney.match(reg)==null) {
          _this.$Message["error"]({
            background: true,
            content: "期待金额框必须输入数字！！",
          });
        }else{
          let Cdata = {
            g_name:this.name_Goods,
            g_text:this.text_Goods,
            g_end_money:this.wantmoney,
            gid:this.changeId
          }
          sendChangeMsg(Cdata).then(function(res){
            _this.$Message[res.err_code]({
              background: true,
              content: res.message,
            });   
          })
        }
      }  
    },
    // 检测是否输入的是数字
    numLook(){
      let  reg=/^[0-9]{0,10}$/
      if (this.wantmoney.match(reg)==null) {
        this.$Message["error"]({
          background: true,
          content: "请输入数字！！",
        });
      }
    },
    // 修改函数
      changeMsg(index, row){
        this.modal2 = true;
        this.ImgUrl = row.g_picture;
        this.name_Goods = row.g_name;
        this.nowmoney = row.g_start_money;
        this.wantmoney = row.g_end_money;
        this.videoUrl = row.g_video;
        this.text_Goods = row.g_text;
        this.changeId = row.gid;
      },
      // 停止video播放
      letVideoStop(){
        this.$refs.videos.pause();
        this.modal3 = false;  
      },
    // 封装函数 分页功能
    changepagenew(sendsdata) {
      this.dataGoods = [];
      this.allData = [];
      this.allData = sendsdata;
      this.dataCount = sendsdata.length;
      if (sendsdata.length < this.pageSize) {
        this.dataGoods = this.allData;
      } else {
        this.dataGoods = this.allData.slice(0, this.pageSize);
      }
    },
    // 点击按钮事件
    changepage(index) {
      var _start = (index - 1) * this.pageSize;
      var _end = index * this.pageSize;
      this.dataGoods = this.allData.slice(_start, _end);
    },

    // 模糊搜索
    likeSecrch() {
      let _this = this;
      let sendMsg = this.seachvalue;
      getmessage(sendMsg).then(function(res) {
        _this.changepagenew(res);
      });
    },
    // 详情显示
    showparticulars(row) {
      this.modal1 = true;
      this.ImgUrl = row.g_picture;
      this.name_Goods = row.g_name;
      this.nowmoney = row.g_start_money;
      this.wantmoney = row.g_end_money;
      this.videoUrl = row.g_video;
      this.text_Goods = row.g_text;
    },
    //停止众筹
    exitGoods(row) {
      var _this = this;
      if ((parseInt(row.g_state) == 0) | (parseInt(row.g_state) == 1)) {
        // 弹出模态框
        this.$show
          .show1({
            title: "停止众筹",
            content: "您确定是要停止众筹吗？",
            success: "停止众筹成功",
          })
          .then(() => {
            // 修改信息
            sendSta(row.gid).then(function(res) {
              // 重新获取数据渲染
              getmessage().then(function(newres) {
                _this.changepagenew(newres);
              });
            });
          })
          .catch();
      } else {
        this.$Message["error"]({
          background: true,
          content: "当前状态无法停止！",
        });
      }
    },
    // 显示视频
    showVideo() {

      if (this.videoUrl == "无") {
        this.$Message["error"]({
          background: true,
          content: "该项目没有视频",
        });
      } else {
        this.modal3 = true;
      }
    },
  },

  // 生命周期获取数据
  beforeCreate() {
    var _this = this;
    getmessage().then(function(res) {
      _this.changepagenew(res);
    });
  },
};
</script>
<style scoped>
.Input3-modal2{
   margin-top: 12px;
  width: 75%;
  margin-left: 12%;
  height: 50px;
}
.fonts_modal2{
  margin-top: 12px;
}
.Input2-modal2{
  margin-top: 12px;
  width: 75%;
  margin-left: 2%;
}
.font_modal2{
  margin-left: 1%;
}
.Input-modal2{
  width: 75%;
  margin-left: 7%;
}
.margin-left-btn{
  margin-left: 5%;
}
.change-img-btn-left{
  margin-top: 4%;
  margin-left: 15%;
}
.modal2-img{
  width: 96%;
  border-radius: 5%;
}
.modal2_all_box{
  width: 100%;
  height: 250px;
}
.left_box_modal2{
  float: left;
  width: 42%;
  height: 100%;
}
.right_box_modal2{
  float: left;
  width: 58%;
}
.page_box_goodsMange{
  margin-top: 20px;
}
.text_row_1{
  height: 350px;
}
.img_box_Goods {
  width: 40%;
  height: 200px;
  /* border: 1px solid; */
  float: left;
}
.Goods_message_box {
  width: 100%;
  height: 200px;
  /* float: left; */
}
.Goods_img {
  width: 100%;
  height: 150px;
}
.search_box {
  width: 50%;
  margin-bottom: 20px;
  height: 40px;
}

.Icon_buitton_box {
  width: 9%;
  height: 79%;
  /* border: 1px solid; */
  border-top-right-radius: 15%;
  border-bottom-right-radius: 15%;
  float: left;
  background: #2d8cf0;
}
.Input_search_box {
  width: 80%;
  height: 100%;
  /* border: 1px solid; */
  float: left;
}
.Icon_search_box {
  margin-left: 20%;
  margin-top: 8%;
}
.right_goods_box {
  width: 50%;
  height: 200px;
  /* border: 1px solid; */
  float: left;
  margin-left: 5%;
}
.video_goods_box {
  width: 100%;
  height: 300px;
  /* border: 1px solid; */
}
</style>
